.title{
	text-align: center;
	font-size: 8vh;
	margin: 100px auto;
	color: #444;
	user-select: none;
}
.ul{
	margin:0 auto;min-width:150px;width:50vw;max-width:600px;
	display: flex;flex-direction: row;justify-content: space-around;
	list-style: none;font-size: 4vh;
}
.li{
	cursor:pointer;
	width:80px;
	line-height:40px;
	text-align: center;
	user-select: none;
}
.li:hover{
	color:orange;
}
.rulemask{
	position: absolute;
	width: 100%;
	height: 90%;
	margin:50px auto;
	text-align: center;
	/*background-color: #ad6548;*/
	transition-duration: 0.5s;
	display: none;
}
.ruleframe{
	display: block;
	width: 60%;
	height:70%;
	margin:0 auto;
	border:#444 solid 2px;
	border-radius: 20px;
	position: relative;
	top:50px;
	background-color: #fff;
	/*overflow: hidden;*/
	overflow: auto;
}
.ruleframe::-webkit-scrollbar{
	display: none;
}
.dyna{/*展开动效*/
	transform: scale(1,1);
	transition-duration: 0.3s;
	animation-name: openrule;
	animation-duration: 0.3s;
}
.dyna2{
	transform: scale(0,0);
	transition-duration: 0.3s;
	animation-name: closerule;
	animation-duration: 0.3s;
}
.close{
	font-size: 50px; 
	position: absolute;
	top: -10px;
	right:10px;
	width:40px;
	cursor: pointer;
	user-select: none;
}
.close:hover{
	color: orange;
}
@keyframes openrule{
	from{
		transform: scale(1,0);
	}
	to{
		transform: scale(1,1);
	}
}
@keyframes closerule{
	from{
		transform: scale(1,1);
	}
	to{
		transform: scale(1,0);
	}
}
.rulelist{
	padding: 50px 20px 0 20px;
	line-height: 180%;
	height:70%;
	font-size: 2.5vh;
}